<template>
<div class="rightList">
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
		<div class="main">
			<van-cell-group>
        <van-cell :title="monthsTiltleData" :label="'兑换' + monthData.exchangeTotal + ' 收益' + monthData.total" class="cell-head">
          <img style="width:32px;height:32px;margin-top: 4px;" slot="right-icon" src="@/assets/img/calendar1.jpg" @click="showCalendar = !showCalendar"/>
        </van-cell>
         <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad"
            v-if="list && list.length > 0"
          >
            <van-cell
              v-for="cell in list"
              :key="cell.title"
              :title="cell.status"
              :label="cell.time + '-' +cell.timeHI"
              @click="getDetails(cell)"
            >
              <div slot="right-icon" :class="{'right': cell.status === '收益','comonn': cell.status !== '收益'}">
                <span v-if="cell.exchangeStatus === 0" style="font-size:16px;">失败</span>
                <span v-if="cell.exchangeStatus != 0">{{exchangeInsteres(cell.status,cell.interests)}}</span>
              <p v-if="cell.exchangeType" class="common-tips">{{cell.exchangeType}}</p>
            </div>
            </van-cell>
          </van-list>
      </van-cell-group>
      <div v-if="!list || list.length === 0" class="no-data"></div>
		</div>

	</van-pull-refresh>
  <van-popup v-model="showCalendar" position="bottom" :overlay="true">
    <van-datetime-picker
      v-model="time"
      type="year-month"
      :max-date="maxDate"
      :formatter="formatter"
      @confirm="getRightLists"
      @cancel="showCalendar = !showCalendar"
    />
  </van-popup>
	</div>
</template>
<script>
import {
  getList,
  exchange,
  getWeChatCash,
  getWeTakecash,
  getPay,
  getRightList
} from "../../../api/rightsInterests.js";
import { error } from "util";
import originJSONP from "jsonp";
// import calendar1 from '@/assets/img/calendar1.jpg';
export default {
  data() {
    return {
      listParams: {
        pageNum: 1,
        pageSize: 20
      },
      isLoading: false,
      id: "",
      // 上拉加载
      loading: false,
      finished: false,
      total:0,
      time: new Date(),
      list: [],
      monthData: {exchangeTotal: 0, total: 0},
      showCalendar: false,
      maxDate: new Date(),
      total: 0,
      monthsTiltleData: '本月'
    };
  },
  computed: {
    status: {
      get () {
        return this.$store.state.status.status
      },
      set (value) {
        this.$store.commit('exchangeStatus', value)
      }
    }
  },
  created() {
    this.getRightLists();
  },
  methods: {
    getRightLists () {
      let state = null;
      if (this.status === 3) {
        state = 0
      } else if (this.status === 1) {
        state = 1;
      } else if (this.status === 2) {
        state = 2;
      } else {
        state = null;
      }
      const obj = {
        mobile: sessionStorage.getItem('phone'),
        pageNum: this.listParams.pageNum,
        pageSize: this.listParams.pageSize,
        time: this.getTime(),
        status: state
      }
      getRightList(obj).then(res => {
        this.list = res.data.data;
        this.total = res.data.total;
        if (this.list) {
          this.monthData = {exchangeTotal: res.data.duihuanTotal, total: res.data.shouyiTotal};
          this.showCalendar = false;
        }
      }).catch(error => {
        if (error.status !== 100 && error.status !== 102 ) {
          this.$toast.fail(error.message);
        }
        this.showCalendar = false;
      })
    },
    getTime() {
      let year = this.time.getFullYear();
      let month = this.time.getMonth() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      if (this.time.toDateString() === new Date().toDateString()) {

      } else {
        this.monthsTiltleData = year + '-' + month;
      }
      return year + '-' + month;
    },
    exchangeInsteres(type, val) {
      if (type === '收益') {
        val = '+' + val;
      } else {
        val = '-' + val;
      }
      return val;
    },
    getDetails(item) {
      console.log('item',item)
      sessionStorage.removeItem('rightsId');
      if(item.exchangeType === '油卡兑换') {
        this.$router.push({name: 'ykdetailed', query: {id: item.userId, exchangeId: item.exchangeId, status: item.status}});
      }else if(item.exchangeType === '微信提现'){
        this.$router.push({name: 'wxdetail', query: {id: item.userId, exchangeId: item.exchangeId, status: item.status}});
      }else {
        this.$router.push({name: 'rightListDetail', query: {id: item.userId, exchangeId: item.exchangeId, status: item.status}});
      }
      // this.$router.push({name: 'rightListDetail', query: {id: item.userId}});
      // this.$router.push({name: 'ykdetails', query: {id: item.userId}});
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }
      return value;
    },
    onRefresh() {
      this.finished = false;
      this.list = [];
      this.listParams.pageNum = 1;
      this.getRightLists();
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    onLoad() {
      if (this.list.length < this.total) {
        // 异步更新数据
        setTimeout(() => {
          ++this.listParams.pageNum;
          let state = null;
          if (this.status === 3) {
            state = 0
          } else if (this.status === 1) {
            state = 1;
          } else if (this.status === 2) {
            state = 2;
          }
          const obj = {
            mobile: sessionStorage.getItem('phone'),
            pageNum: this.listParams.pageNum,
            pageSize: this.listParams.pageSize,
            time: this.getTime(),
            status: state
          }
          getRightList(obj).then(res => {

            this.loading = false;
            let list = [];
            if (res.data.data) {
              // this.listthis.list.concat(res.data.data);
              list = res.data.data;
            }

            this.list = this.list.concat(list);
            console.log('list',this.list.length, list.length)
            this.showCalendar = false;
          }).catch(error => {
            if (error.status !== 100 && error.status !== 102 ) {
              this.$toast.fail(error.message);
            }
            this.showCalendar = false;
          })
        }, 1000);

      } else {
        // this.loading = ;
        this.finished = true;
        this.loading = false;
      }

    }
  }
};
</script>
<style lang="less">
.rightList{
  .main {
    -webkit-overflow-scrolling: touch;
    background: #FFF;
    // position: fixed;
    // height: 100%;
    // width: 100%;
    .van-cell__label {
      font-size: 12px;
      line-height: 1.2;
      color: #888888 !important;
    }
    .bg-nummNum {
      width: 100%;
      height: 380px;
      background: url(../../../assets/img/null_bg_qy.jpg) no-repeat center center;
      background-size: 170px auto;
    }
    .no-data{
      width: 100%;
      height: 380px;
      background: url(../../../assets/img/noData.jpg) no-repeat center center;
      background-size: 170px auto;
      margin-top: 20px;
    }

    .cell-head{
      background:rgba(242,242,242,1);
      opacity:1;
    }
    h3 {
      padding: 12px 0;
      span {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #888888;
        font-weight: normal;
        margin-left: 20px;
      }
      i {
        background: #49b7e0;
        height: 20px;
        width: 3px;
        display: inline-block;
        float: left;
      }
    }
    .van-cell-group {
      background: #F2F2F2 !important;
      li {
        padding: 5px;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        label {
          width: 110px;
          display: inline-block;
        }
      }
      button {
        border: none;
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #333333;
      }
    }
  }
}
.van-panel {
  margin-bottom: 20px;
}
.exchangeBt {
  background: #49b7e0;
  color: #fff;
  width: 90%;
  border: none;
  position: fixed;
  bottom: 30px;
  margin-left: 5%;
  height: 35px;
  line-height: 35px;
  border-radius: 4px;
  font-size: 16px;
}
.right{
  width:auto;
  height:28px;
  font-size:20px;
  font-family:PingFang SC;
  font-weight:normal;
  line-height:28px;
  color:rgba(237,162,61,1);
  opacity:1;
}
.comonn{
  width: auto;
  text-align: right;
  height:28px;
  font-size:20px;
  font-family:PingFang SC;
  font-weight:normal;
  line-height:28px;
  color:rgba(51,51,51,1);
  opacity:1;
  .common-tips{
    width:auto;
    height:17px;
    font-size:12px;
    font-family:PingFang SC;
    font-weight:300;
    line-height:6px;
    color:rgba(136,136,136,1);
    opacity:1;
  }
}
.blue {
  color: #49b7e0;
  span {
    color: #49b7e0 !important;
  }
  p {
    color: #49b7e0 !important;
  }
}
.van-dialog__message {
  text-align: center;
}
</style>
